<template>
  <div>
    <div class="white"></div>
    <div class="guesslike">
      <div class="row">
        <div class="col-12">
          <div class="divider">
            <el-divider content-position="center"
              ><div style="font-size: 18px">猜你喜欢</div></el-divider
            >
          </div>
        </div>
      </div>
    </div>

    <div class="likelist">
      <!-- 第一行 -->
      <div class="row row-like">
        <div class="col-6 col-left">
          <div class="card left">
            <div
              style="width: 75%; height: 75%; margin: auto; padding-top: 10%"
            >
              <img
                src="https://img.ddimg.mobi/product/73729284b788d1558072397291.jpg!deliver.product.list"
                class="card-img-top"
                alt="..."
              />
            </div>
            <div class="card-body">
              <h6 class="card-title">康师傅大食代红烧牛肉面 5包/袋</h6>
              <div class="card-text">
                <div class="price pt-2">¥15.9</div>
                <div class="origin-price pt-2">¥14.9</div>
                <van-icon
                  name="cart-circle"
                  size="2.5rem"
                  color="#00cc33"
                  class="pl-2 pt-0"
                  style="float: right"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="col-6 col-right">
          <div class="card right">
            <div
              style="width: 75%; height: 75%; margin: auto; padding-top: 10%"
            >
              <img
                src="https://ddimg.ddxq.mobi/6e3232521505279920863.jpg!maicai.product.list"
                class="card-img-top"
                alt="..."
              />
            </div>
            <div class="card-body">
              <h6 class="card-title">沈大成鲜肉虾仁小馄饨 120g/袋</h6>
              <div class="card-text">
                <div class="price pt-2">¥8.9</div>
                <div class="origin-price pt-2">¥11.9</div>
                <van-icon
                  name="cart-circle"
                  size="2.5rem"
                  color="#00cc33"
                  class="pl-2 pt-0"
                  style="float: right"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="height: 10px"></div>

      <!-- //第二行 -->
      <div class="row row-like">
        <div class="col-6 col-left">
          <div class="card left">
            <div
              style="width: 75%; height: 75%; margin: auto; padding-top: 10%"
            >
              <img
                src="https://img.ddimg.mobi/product/2f9f42dd5c3311558682395205.jpg!deliver.product.list"
                class="card-img-top"
                alt="..."
              />
            </div>
            <div class="card-body">
              <h6 class="card-title">清美内酯豆腐 400g/盒</h6>
              <div class="card-text">
                <div class="price pt-2">¥2.0</div>
                <div class="origin-price pt-2">¥3.9</div>
                <van-icon
                  name="cart-circle"
                  size="2.5rem"
                  color="#00cc33"
                  class="pl-2 pt-0"
                  style="float: right"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="col-6 col-right">
          <div class="card right">
            <div
              style="width: 75%; height: 75%; margin: auto; padding-top: 10%"
            >
              <img
                src="	https://img.ddimg.mobi/product/2d489406e91691544062166784.jpg!maicai.product.list"
                class="card-img-top"
                alt="..."
              />
            </div>
            <div class="card-body">
              <h6 class="card-title">土鸡蛋<br />8枚</h6>
              <div class="card-text">
                <div class="price pt-2">¥9.9</div>
                <div class="origin-price pt-2">¥12.9</div>
                <van-icon
                  name="cart-circle"
                  size="2.5rem"
                  color="#00cc33"
                  class="pl-2 pt-0"
                  style="float: right"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="height: 10px"></div>

      <!-- 第三行 -->
      <div class="row row-like">
        <div class="col-6 col-left">
          <div class="card left">
            <div
              style="width: 75%; height: 75%; margin: auto; padding-top: 10%"
            >
              <img
                src="https://img.ddimg.mobi/product/99525c1c2a9ad1548473873455.jpg!deliver.product.list"
                class="card-img-top"
                alt="..."
              />
            </div>
            <div class="card-body">
              <h6 class="card-title">民维大牧汗羔羊肉片 220g</h6>
              <div class="card-text">
                <div class="price pt-2">¥25.9</div>
                <div class="origin-price pt-2">¥32.9</div>
                <van-icon
                  name="cart-circle"
                  size="2.5rem"
                  color="#00cc33"
                  class="pl-2 pt-0"
                  style="float: right"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="col-6 col-right">
          <div class="card right">
            <div
              style="width: 75%; height: 75%; margin: auto; padding-top: 10%"
            >
              <img
                src="	https://ddimg.ddxq.mobi/e13725751514881445681.jpg!maicai.product.list"
                class="card-img-top"
                alt="..."
              />
            </div>
            <div class="card-body">
              <h6 class="card-title">乡吧佬卤蛋 25g/只</h6>
              <div class="card-text">
                <div class="price pt-2">¥1.9</div>
                <div class="origin-price pt-2">¥2.9</div>
                <van-icon
                  name="cart-circle"
                  size="2.5rem"
                  color="#00cc33"
                  class="pl-2 pt-0"
                  style="float: right"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="height: 30px"></div>

      <div class="guesslike">
        <div class="divider">
          <el-divider content-position="center"
            ><div style="font-size: 13px">已经到底部了~~</div></el-divider
          >
        </div>
      </div>
      <div style="height: 50px"></div>
    </div>
  </div>
</template>
<style>
.white {
  height: 50px;
  background-color: white;
}
.guesslike {
  width: 100%;
}
.divider {
  padding: 0px 45px;
}
.likelist {
  padding-top: 8%;
}

.left {
  left: 7px;
}
.right {
  right: 7px;
}

.row-like {
  padding: 0px 10px;
}

.price {
  display: inline-block;
  /* color: #f7600f;
  font-weight: 500;
  font-size: 18px; */

  line-height: 1rem;
  font-weight: bold;
  font-size: 1.05rem;
  float: left;
  color: #fe6263;
}

.origin-price {
  display: inline-block;
  margin-left: 5px;
  color: #969799;
  font-size: 12px;

  text-decoration: line-through;
}
</style>